<template>
	<view class="content">
		<!-- 基础用法 -->
		<view v-bind:key='index' v-for="(item,index) in lamps"  v-on:click="openLamp(item)">
		        <view class='cont'>
					<view class="lamTop" style="position:relative;width: 100%;">
						<image src="../../static/zhengchang.png" class="img" v-if="item.status==0"></image>
						<image src="../../static/yichang.png" class="img" v-if="item.status==1"></image>
						<image src="../../static/zhongduan.png" class="img" v-if="item.status==2"></image>
						<view class="lamtopleft radius">
							{{item.name}}
						</view>
						<view class="lamtopright radius" v-if="item.status==0">工作正常</view>
						<view class="lamtopright radius" v-if="item.status==1">异常跳闸</view>
						<view class="lamtopright radius" v-if="item.status==2">通讯断开</view>
					</view>
					<view class="lamBottom">
						设备编码:{{item.code}}
					</view>
					<view class="lamBottom">
						心跳时间:{{item.lastHeartBeatTime}}
					</view>
					<view class="lamBottom">
						复位时间:{{item.resetTime}}
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		props:{
			lamps:{
				type:Array,
				required:true
			}
		},
	  data(){
	    return {
	      options:[
	         {
	            text: '确认',
	            style: {
	                backgroundColor: '#dd524d'
	            },
	        }
	      ],
	    }
	  },
	  methods:{
		  openLamp(item){
		  	 for(let lamp of this.$lamps.data.list){
		  	 	if(item.code === lamp.code){
		  	 		uni.navigateTo({
		  	 		    url: '../lamp/lamp?code='+lamp.code+'&name='+lamp.name,
		  	 		});
		  	 	}
		  	 }
		  },
	  },
	  computed:{
		  
	  },
	  watch:{
		  changeStatus(oldval,newVal){
			  return oldval+10;
		  }
	  },
	}
</script>

<style lang="scss">
	.cont{
		border-top-width: 10rpx;
		border-bottom-width: 10rpx;
		border-left-width: 10rpx;
		border-right-width: 10rpx;
		border-style:solid;
		border-color:#efefef;
		background-color:#ebeaea;
		width: 100%;
	}
	.lamTop{
		display: flex;
	}
	.lamtopleft{
		width: 75%;
		margin-left: 20rpx;
		font-size: 50rpx;
	}
	.lamtopright{
		margin-top: 25rpx;
		margin-right: 50rpx;
		width: 25%;
		text-align:center;
	}
	.lamBottom{
		display: flex;
		text-align:center;
		font-size: 25rpx;
		color: darkgray;
		margin-left: 50rpx;
	}
	.lamBottomleft{
		width: 50%;
	}
	.lamBottomright{
		width: 50%;
	}
	.radius{
		border-style:solid;
		border-radius: 15rpx;
		border-color:#ebeaea;
	}
	.img{
		width: 80rpx;
		height: 80rpx;
		margin-left: 20rpx;
	}
	
</style>
